<template>
  <div class="main">
    <div class="nav">商丘学院智慧农业数字中心</div>

    <div class="content">
      <div class="centerBox">
        <div class="baseBox centerMainBox1" style="height:70%">
          <div class="baseBoxLeft left">
            <div class="boxTitle">天气预报</div>
            <img src="./img/left.png" class="first_border" alt="" />
            <div class="firstBox">
              <WeatherForecast />
            </div>
          </div>
          <div class="baseBoxRight right">
<!--            <a class="navLeft" href="./mapDetails.html">-->
<!--              <img style="" src="./img/fanhui.png" alt="" />-->
<!--            </a>-->
            <GreenhouseMonitor @camera-change="handleCameraChange" />
          </div>
        </div>

        <div class="baseBox centerMainBox2" style="height:30%;">
          <img src="./img/down.png" class="first_border" alt="" style="pointer-events: none;" />
          <DeviceHistory ref="deviceHistoryRef" />
        </div>
      </div>
      <div class="leftBox right" style="width:20%">
        <div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
          <img src="./img/right.png" class="hardware" alt="" />
          <DeviceControl />
        </div>
        <div class="baseBox baseBox2" style="margin-bottom:15px;height:29.5%">
          <img src="./img/right2.png" alt="" />
          <IrrigationData />
        </div>
        <div class="baseBox baseBox3" style="height:30%">
          <img src="./img/right3.png" alt="" />
          <DataLog />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import './css/reset.css'
import './css/new_index.css'
import WeatherForecast from './components/WeatherForecast.vue'
import GreenhouseMonitor from './components/GreenhouseMonitor.vue'
import DeviceHistory from './components/DeviceHistory.vue'
import DeviceControl from './components/DeviceControl.vue'
import IrrigationData from './components/IrrigationData.vue'
import DataLog from './components/DataLog.vue'
import { ref } from 'vue'

// 创建DeviceHistory组件的引用
const deviceHistoryRef = ref<InstanceType<typeof DeviceHistory> | null>(null);

// 处理摄像头切换事件
const handleCameraChange = (camera: any) => {
  // 调用DeviceHistory组件的方法来处理摄像头切换
  if (deviceHistoryRef.value && deviceHistoryRef.value.handleCameraChange) {
    deviceHistoryRef.value.handleCameraChange(camera);
  }
};
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url(./img/bg.png) no-repeat;
  background-size: 100% 100%;
}

/*.nav {*/
/*  width: 100%;*/
/*  height: 10%;*/
/*  font-size: 2vw;*/
/*  text-align: center;*/
/*  line-height: 100%;*/
/*  color: #0efcff;*/
/*  letter-spacing: .4vw;*/
/*  background: url(./img/nav.png) no-repeat;*/
/*  background-size: 100% 100%;*/
/*}*/

.nav_btn {
  width: 100%;
  height: 8%;
  /* background-color: pink; */
  display: -webkit-flex;
  display: -moz-flex;
  -webkit-flex-direction: row;
  -webkit-justify-content: space-between;
  -moz-flex-direction: row;
  -moz-justify-content: space-between;
}

.btn_left,
.btn_right {
  width: 40%;
  height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  -webkit-flex-direction: row;
  -webkit-align-items: center;
  -moz-flex-direction: row;
  -moz-align-items: center;
}

.btn_list {
  width: 24%;
  height: 60%;
  font-size: .8vw;
  text-align: center;
  line-height: 100%;
  color: #fff;
  position: relative;
  cursor: pointer;
}

.btn_left a,
.btn_right a {
  display: inline-block;
}

.btn_left a:nth-child(2) {
  margin: 0 .6vw;
}

.btn_left a:nth-child(4) {
  margin-left: .6vw;
}

.btn_right a:nth-child(2) {
  margin: 0 .6vw;
}

.btn_right a:nth-child(4) {
  margin-left: .6vw;
}

.btn_list:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #6176AF;
  transform: skewX(-38deg);
}

.btn_list:hover::before {
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.listActive:before {
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;
}

.content {
  position: relative;
  width: 97%;
  height: 87%;
  margin: auto;
  /* background: white; */
}

.baseBox {
  position: relative;
  float: left;
  width: 48.8%;
  height: 32.3%;
  border: 1px solid #6176AF;
  background: rgba(11, 21, 44, 0.60);
  border-radius: 5px;
}

.baseHeightBox {
  height: 100%;
}

.baseCenterBox {
  margin: 1.5% 0;
}

.leftBox {
  float: left;
  height: 100%;
  width: 34.5%;
  /* background: yellow; */
}

.rightBox {
  float: left;
  height: 100%;
  width: 34.5%;
}

.centerBox {
  position: relative;
  float: left;
  width: 30%;
  height: 100%;
  margin: 0 .5%;
  /* background: red; */
}

.marginLeft {
  margin-left: 1.5%;
}

/* 边框描边 */
.leftTopLine1 {
  position: absolute;
  top: 0;
  left: -1px;
  height: 1vw;
  width: 2px;
  background: #0efcff;
}

.leftTopLine2 {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 1vw;
  background: #0efcff;
}

.rightTopLine1 {
  position: absolute;
  top: 0;
  right: -1px;
  height: 1vw;
  width: 2px;
  background: #0efcff;
}

.rightTopLine2 {
  position: absolute;
  top: -1px;
  right: 0;
  height: 2px;
  width: 1vw;
  background: #0efcff;
}

.leftBottomLine1 {
  position: absolute;
  bottom: 0;
  left: -1px;
  height: 1vw;
  width: 2px;
  background: #0efcff;
}

.leftBottomLine2 {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 1vw;
  background: #0efcff;
}

.rightBottomLine1 {
  position: absolute;
  bottom: 0;
  right: -1px;
  height: 1vw;
  width: 2px;
  background: #0efcff;
}

.rightBottomLine2 {
  position: absolute;
  bottom: -1px;
  right: 0;
  height: 2px;
  width: 1vw;
  background: #0efcff;
}

.boxTitle {
  font-size: .8vw;
  width: 38%;
  margin-top: 1vw;
  text-align: center;
  color: #0efcff;
}

.right {
  float: right;
}

.baseBoxLeft {
  width: 22%;
  height: 95%;
  position: relative;
}

.baseBoxRight {
  width: 68%;
  height: 100%;
}

.baseBoxLeft .first_border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.firstBox {
  position: relative;
  z-index: 999;
  width: 80%;
  height: 80%;
  margin: 6% auto 0;
}

.pic {
  width: 100%;
  height: 30%;
  position: relative;
}

.first_top1 {
  position: absolute;
  width: 45%;
  height: 90%;
  top: 0;
  left: 0;
}

.first_top2 {
  position: absolute;
  width: 45%;
  height: 90%;
  top: 0;
  right: 0;
}

.picText {
  width: 100%;
  height: 20%;
  font-size: .6vw;
  line-height: 200%;
  color: #0efcff;
}

.text_second {
  float: right;
}

#canvas {
  display: block;
  margin: 0 auto;
  width: 10vw;
  height: 5vw;
}

.progress {
  position: relative;
}

.progress img {
  width: 12.5vw;
  height: 2vw;
  position: absolute;
  top: .4vw;
  right: -.2vw;
}

.progress .disease {
  position: absolute;
  top: .7vw;
  left: .5vw;
  color: #fff;
  font-size: .8vw;
}

.progress .similar {
  position: absolute;
  top: .8vw;
  left: 3vw;
  color: #0efcff;
  font-size: .5vw;
}

/* 返回图标 */
.navLeft {
  position: absolute;
  top: 5%;
  left: 35%;
  width: 3.5%;
  height: 8%;
  z-index: 999;
}

.navLeft>img {
  width: 100%;
  height: 100%;
}

.greenhouse-monitor {
  position: relative;
  width: 105%;
  height: 100%;
}

.monitor-main {
  position: relative;
  width: 96%;
  height: 78%;
  margin: 1% auto 0;
  border: 1px solid #00f5ff;
  border-radius: 4px;
  overflow: hidden;
}

.monitor-status {
  position: absolute;
  top: 1%;
  left: 1%;
  color: #0efcff;
  font-size: 0.6vw;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 3px;
}

.monitor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monitor-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  font-size: 0.6vw;
  display: flex;
  justify-content: space-between;
}

.monitor-location {
  font-weight: bold;
}

.monitor-time {
  color: #0efcff;
}

.monitor-cameras {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.camera-item {
  width: 4vw;
  height: 3vw;
  border: 1px solid #666;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.7);
}

.camera-item.active {
  border-color: #0efcff;
  box-shadow: 0 0 8px #0efcff;
}

.camera-item img {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.camera-item span {
  display: block;
  font-size: 0.5vw;
  color: #fff;
  text-align: center;
  line-height: 30%;
  padding-top: 2px;
}

.monitor-data {
  width: 100%;
  height: 5%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}

.data-item {
  display: flex;
  align-items: center;
  width: 16%;
}

.data-label {
  font-size: 0.65vw;
  color: #ccc;
  margin-right: 8px;
}

.data-value {
  font-size: 0.7vw;
  color: #fff;
  font-weight: 500;
  margin-right: 8px;
}

.data-status {
  font-size: 0.6vw;
  padding: 1px 6px;
  border-radius: 3px;
}

.data-status.normal {
  background-color: rgba(0, 255, 0, 0.3);
  color: #0f0;
}

.data-status.warning {
  background-color: rgba(255, 165, 0, 0.3);
  color: #ffa500;
}

.data-status.error {
  background-color: rgba(255, 0, 0, 0.3);
  color: #f00;
}

/* ---public---- */
.centerBox {
  width: 75%;
  margin-right: 15px;
  background: transparent;
}

.boxFont {
  font-size: 1.2vw;
}

.centerMainBox1 {
  width: 100%;
  height: 60.5%;
}

.centerMainBox2 {
  width: 100%;
  height: 38%;
  position: relative;
  margin-top: 0;
}

.centerMainBox2 .first_border {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boxTitle2 {
  width: 100%;
  height: 10%;
  font-size: .6vw;
  text-align: center;
  line-height: 10%;
  margin-top: 1vw;
  color: #0efcff;
}

.contList {
  position: relative;
  width: 80%;
  height: 6vw;
  margin: 0.1vw auto 0;

}

.content1 li {
  display: none;
}

.baseBox {
  width: 100%;
  border: none;
  background: none;
}

.boxTitle {
  font-size: .8vw;
  width: 38%;
  margin-top: 1vw;
  text-align: center;
}

.right {
  float: right;
}

.baseBoxLeft {
  width: 22%;
  height: 95%;
  position: relative;
}

.baseBoxRight {
  width: 77%;
  height: 104%;
}

.baseBoxLeft .first_border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.baseBox1,
.baseBox2,
.baseBox3 {
  position: relative;
}

.baseBox1 .hardware,
.baseBox2 img,
.baseBox3 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.csbaseBox1 {
  position: relative;
  z-index: 999;
}

#canvas {
  display: block;
  margin: 0 auto;
  width: 10vw;
  height: 5vw;
}

.progress {
  position: relative;
}

.progress img {
  width: 12.5vw;
  height: 2vw;
  position: absolute;
  top: .4vw;
  right: -.2vw;
}

.progress .disease {
  position: absolute;
  top: .7vw;
  left: .5vw;
  color: #fff;
  font-size: .8vw;
}

.progress .similar {
  position: absolute;
  top: .8vw;
  left: 3vw;
  color: #0efcff;
  font-size: .5vw;
}

/* 返回图标 */
.navLeft {
  position: absolute;
  top: 5%;
  left: 35%;
  width: 3.5%;
  height: 8%;
  z-index: 999;
}

.navLeft>img {
  width: 100%;
  height: 100%;
}


.light-control h3 {
  color: #0ff;
  margin-bottom: 8px;
  font-size: 12px;
}

.light-control .round-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(145deg, #666666, #444444);
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.light-control .round-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.light-control .round-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.light-control .round-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(30deg);
  transition: all 0.3s ease;
}

.light-control .round-btn:hover::after {
  transform: rotate(30deg) translate(20%, 20%);
}

.light-status {
  color: #fff;
  font-size: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .light-control {
    flex: 0 0 100%;
  }

  .round-btn {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }

  .light-status {
    font-size: 10px;
  }
}
</style>
